/**
 * desc: 新建提醒项
 */

import React, { useEffect, useState } from 'react';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import {
  Form,
  Input,
  message,
  Select,
  Switch,
  Tooltip,
  InputNumber,
} from 'antd';
import { listNoticeTypes, saveOrUpdate } from '../service';
import { isEmpty } from 'lodash';

const { Option } = Select;

const layout1 = {
  //发布表单排布
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

const AddRemindModal = ({ visible, recordData, handleOk, handleCancel }) => {
  const [loading, setLoading] = useState(false);
  const [noticeList, setNoticeList] = useState([]); //提醒类型的数据
  const [isShow, setIsShow] = useState(false); //是否展示表单内容

  const [form] = Form.useForm();

  const noticeType = Form.useWatch('noticeType', form);

  useEffect(() => {
    if (visible) {
      form.resetFields();
      getListNoticeTypes();
    }
  }, [visible]);

  //   useEffect(() => {
  //     if (noticeType) {
  //       setIsShow(true);
  //     } else {
  //       setIsShow(false);
  //     }
  //   }, [noticeType]);

  useEffect(() => {
    if (!isEmpty(recordData)) {
      setIsShow(true);
    } else {
      if (noticeType) {
        setIsShow(true);
      } else {
        setIsShow(false);
      }
    }
  }, [recordData, noticeType]);

  //获取提醒类型的数据
  const getListNoticeTypes = async () => {
    setLoading(true);
    const { success, data = [] } = await listNoticeTypes();
    if (success) {
      setNoticeList(data);
    }
    setLoading(false);
  };

  const onOk = () => {
    form.validateFields().then((val) => {
      handleSubmit(val);
    });
  };

  const handleSubmit = async (val) => {
    setLoading(true);
    const { success } = await saveOrUpdate({
      ...val,
      state: val.state ? 1 : 0,
      id: !isEmpty(recordData) ? recordData?.id : undefined,
      noticeType: !isEmpty(recordData)
        ? recordData?.noticeType
        : val.noticeType,
    });
    setLoading(false);
    if (success) {
      message.success(!isEmpty(recordData) ? '修改成功' : '新增成功');
      handleOk();
    }
  };

  const options =
    !isEmpty(noticeList) &&
    noticeList.map((d) => (
      <Option value={d.noticeType} key={d.noticeType} label={d.noticeTypeName}>
        <Tooltip title={d.noticeTypeName}>{d.noticeTypeName}</Tooltip>
      </Option>
    ));

  return (
    <CommonModal
      title={!isEmpty(recordData) ? '用户余额提醒' : '新建提醒项'}
      visible={visible}
      onCancel={handleCancel}
      width="500px"
      onOk={onOk}
    >
      <Form
        form={form}
        name="add-remind-modal"
        {...layout1}
        initialValues={{
          noticeType: recordData?.noticeType,
          noticeLowAmount: recordData?.noticeLowAmount,
          state: recordData?.state == 1 ? true : false,
        }}
      >
        {isEmpty(recordData) ? (
          <Form.Item
            label="提醒类型"
            name="noticeType"
            rules={[{ required: true, message: '请选择提醒类型' }]}
          >
            <Select placeholder="请选择提醒类型" allowClear>
              {options}
            </Select>
          </Form.Item>
        ) : (
          ''
        )}

        {isShow && (
          <>
            <Form.Item
              label="低于金额"
              name="noticeLowAmount"
              rules={[{ required: true, message: '请输入低于金额' }]}
            >
              <InputNumber
                style={{ width: '264px' }}
                precision={2}
                placeholder="请输入金额"
                min={0}
              ></InputNumber>
            </Form.Item>

            <Form.Item
              label="是否开启设置"
              name="state"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>

            <p style={{ marginLeft: '40px' }} className="common-color13">
              注：请设置阈值，例如低于100元时提醒给特定联系人
            </p>
          </>
        )}
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default AddRemindModal;
